<template>
  <transition name="fade">
    <div v-if="show" class="toast">
      <div class="toast-wrap">
        数据异常，请稍后重试
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    data () {
      return {
        show: false
      }
    },
    methods: {
      pop () {
        const vm = this
        vm.show = true
        setTimeout(function () {
          vm.show = false
        }, 3000)
      }
    }
  }
</script>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1s
  }

  .fade-enter, .fade-leave-active {
    opacity: 0
  }

  .toast {
    position: absolute !important;
    z-index: 50000 !important;
    padding: 5px 10px !important;
    margin: 0 auto !important;
    top:10% !important;
    left: 0 !important;
    right: 0 !important;
    line-height: 25px !important;
    background: none !important;
    text-align: center !important
  }

  .toast-wrap {
    padding: 10px 15px !important;
    display: inline-block !important;
    background: RGBA(0, 0, 0, 0.7) !important;
    color: #FFFFFF !important;
    border-radius: 5px !important;
    max-width: 80%;
    word-break: break-all;
  }


</style>